<template>
	<el-dialog draggable v-model="dialogShow" :close-on-click-modal="false" width="60%" @close="onClose">
		<el-form ref="formRef" :rules="formRules" :model="formData" size="default" label-width="90px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="formData.Id == 0">
					<el-form-item label="选择文件" prop="Name">
						<el-input v-model="formData.Name" readonly>
							<template #append>
								<el-upload
									ref="uploadRef"
									:action="upload.action"
									:headers="upload.headers"
									:show-file-list="false"
									:on-change="onUploadChange"
									:before-upload="onUploadBefore"
									:on-success="onUploadSuccess"
									:on-error="onUploadError"
									:auto-upload="false"
									:data="formData"
								>
									<el-button type="primary">选择文件</el-button>
								</el-upload>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="是否分享" prop="IsShare">
						<el-switch v-model="formData.IsShare" inline-prompt active-text="分享" inactive-text="不分享"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="formData.IsShare">
					<el-form-item label="分享密码" prop="SharePwd">
						<el-input v-model="formData.SharePwd" clearable placeholder="为空则不需要密码" maxlength="6" show-word-limit></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onClose" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { Ref, ref } from 'vue';
import { Post } from '/@/common/http';
import EMsg from '/@/common/eMsg';
import { uploadData } from '/@/common/upload';
import type { UploadInstance } from 'element-plus';

const dialogShow = ref(false);
const upload: Ref<any> = ref(uploadData('SysFiles/Add'));
const formRef = ref();
const formRules = ref({
	Name: [{ required: true, message: '请选择文件', trigger: 'blur' }],
});
const uploadRef = ref<UploadInstance>();
const formData = ref({
	Id: 0,
	Name: '',
	IsShare: false,
	SharePwd: '',
});

const onShow = (id: number) => {
	dialogShow.value = true;
	formData.value.Id = id;
	if (id > 0) {
		Post('SysFiles/Get', { Id: id }, (res: any) => {
			formData.value = res.Data;
		});
	}
};
const onClose = () => {
	formRef.value.resetFields();
	dialogShow.value = false;
};
const onSubmit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
			if (formData.value.Id > 0) {
				Post('SysFiles/Edit', formData.value, (res: any) => {
					EMsg.success(res.Msg);
					onClose();
					emit('refresh');
				});
			} else {
				uploadRef.value!.submit();
			}
		}
	});
};
const onUploadChange = (file: any) => {
	formData.value.Name = file.name;
};
const onUploadBefore = (file: any) => {
	return true;
};
const onUploadSuccess = (res: any) => {
	EMsg.success(res.Msg);
	onClose();
	emit('refresh');
};
const onUploadError = (res: any) => {
	EMsg.error(res.Msg);
};

const emit = defineEmits(['refresh']);
defineExpose({
	onShow,
});
</script>
